<template>
    <div class="edit-article">

        <div class="edit-article_topbar">
            <button class="edit-article_topbar_topbtn" @click="usewangEditor">
                👈使用wangEditor编辑器
            </button>
            <p class="edit-article_topbar_title" v-if="route.query.id">编辑博客文章</p>
            <p class="edit-article_topbar_title" v-else>新建博客文章</p>
            <p class="edit-article_topbar_title">Markdown-it</p>
            <yk-space align="center">
                <yk-text type="secondary" v-show="nowMonent">{{ nowMonent }} 保存 </yk-text>
                <yk-button type="secondary" @click="submit(0)">保存</yk-button>
                <yk-button @click="submit(1)">发布</yk-button>
            </yk-space>
        </div>
        <yk-space dir="vertical" style="width: 990px;">
            <Mdedit  @formData="formData" @centent="editorData" :artData="defaultArticle"/>
        </yk-space>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';// 导入富文本编辑器组件
import { useArticle } from '../hooks/articleHook';
import Mdedit from '../components/mdedit/mdedit.vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const {
    submit,
    formData,// 文章表单数据
    editorData,// 文章内容
    nowMonent,
    getArticleById,
    defaultArticle
} = useArticle(); // 管理文章选择

const id = ref<number>()
if (route.query.id) {
    id.value = Number(route.query.id);
}

const usewangEditor = () => {
    router.push({
        path: '/editarticle',
        query: {
            id: id.value,
        }
    })
}

onMounted(() => {
    if (id.value) {
       getArticleById(id.value)
    }
})


</script>
<style scoped lang="less">
.edit-article {
    padding: @space-xl 160px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_topbar {
        display: flex;
        justify-content: space-between;
        padding: @space-l @space-xl;
        border-radius: @radius-m;
        background: @bg-color-l;
        margin-bottom: @space-l;
        width: 990px;

        &_topbtn {
            position: absolute;
            top: -60px;
            left: 0;
            .font-l(); // 稍微减小字体
            font-weight: 500; // 减轻字重
            color: @font-color-l; // 使用主题色
            background: rgba(255, 255, 255, 0.1); // 半透明背景
            border: 1px solid rgba(255, 255, 255, 0.3); // 细边框
            border-radius: @radius-m; // 圆角
            padding: @space-s @space-m; // 调整内边距
            cursor: pointer;
            transition: all 0.3s ease; // 平滑过渡

            &:hover {
                background: rgba(255, 255, 255, 0.2); // 悬停时背景加深
                border-color: rgba(255, 255, 255, 0.5); // 边框更明显
                transform: translateY(-2px); // 轻微上浮
            }

            &:active {
                transform: translateY(0); // 点击时复位
            }
        }

        &_title {
            .font-xl();
            font-weight: 600;
        }
    }
}
</style>